<template>
    <div class="box-flex box-set" ref="boxView" :style="maxRow.length>0?'max-width:'+(bayWidth+40)+'px':'visibility:hidden;'">
        <div class="box-left" :style="'left:'+scrollLeft+'px'">
            <div v-for="(h,i) in maxRow" :key="i" :style="'height:'+rowHeight+'px;line-height:'+rowHeight+'px'">{{ (i+1)|zero }}</div>
        </div>

        <div class="box-sets">
            <div class="box-header" :style="'width:'+bayWidth+'px;top:'+scrollTop+'px'">
                <div class="box-headers" v-for="(item,index) in maxBay" v-if="index%2==0" :key="index">{{index|odd}}</div>
            </div>
            <div style="margin-left:40px;margin-top:40px;">
                <div v-for="(row,rows) in maxRow" :key="rows" class="row" :style="'width:'+ bayWidth+'px'">
                    <div class="bay" v-for="(item,bay) in row" :key="bay" v-if="(bay+1)%2===0">
                        <div v-for="(val,tier) in item" :key="tier" class="place" @click="handleClick(rows,bay,tier,val)">
                            <p v-if="val.bayNo%2!==0" :class="[val.type,{'placeChecked':val.checked,'placeSelect':val.select}]" style="height:32px;">
                                {{ val.containerNo }}
                            </p>
                            <p v-else class="even" :class="[val.type,{'placeChecked':val.checked,'placeSelect':val.select}]" :style="'display:'+val.style">
                                {{val.containerNo}}
                            </p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

export default {
    props: {
        maxBay: {
            type: Number,
            required: true
        },
        maxRow: {
            type: Array,
            required: true
        },
        maxTier: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            box: "",
            scrollTop: 0,
            scrollLeft: 0
        };
    },
    mounted() {
        // this.loadData()
        this.box = this.$refs.boxView;
        this.box.addEventListener(
            "scroll",
            res => {
                let scrollTop = this.$refs.boxView.scrollTop;
                let scrollLeft = this.$refs.boxView.scrollLeft;
                // console.log(" scroll " + scrollLeft)
                this.scrollTop = scrollTop;
                this.scrollLeft = scrollLeft;
                // 向下滚动的时候显示
                this.isScroll = scrollTop > 0;
            },
            false
        );
    },
    methods: {
        handleClick(r, b, t, v) {
            // console.log(v)
            // console.log(this.maxRow[r])
            const data={
                row:r,
                bay:v.bayNo,
                tier:t,
                containerNo:v.containerNo,
                type:v.type,
            }
            this.$emit("handleClick", data);
        },
        handleScroll() {
            //改变元素#searchBar的top值
            var scrollTop =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop;
            var offsetTop = document.querySelector("#searchBar").offsetTop;

            if (scrollTop <= 200) {
                offsetTop = 300 - Number(scrollTop);
                document.querySelector("#searchBar").style.top =
                    offsetTop + "px";
            } else {
                document.querySelector("#searchBar").style.top = "100px";
            }
        },
    },
    destroyed() {
        //离开该页面需要移除这个监听的事件
        window.removeEventListener("scroll", this.handleScroll);
    },
    deactivated(){
        window.removeEventListener("scroll", this.handleScroll);
    },
    computed: {
        bayWidth() {
            // 宽45PX,右边距2PX
            return (this.maxBay + 1) / 2 * 45 + (this.maxBay + 1) / 2 * 5;
        },
        rowHeight() {
            // 高32PX + 层高间隙2PX
            return this.maxTier * 32 + this.maxTier * 2 + 3;
        },
        cwbkArr() {
            return Array.from(new Set(this.cwbk));
        }
    },
    filters: {
        odd(index) {
            let val = index + 1;
            if (val % 2 !== 0) {
                if (val < 10) {
                    return "0" + val;
                } else {
                    return val;
                }
            }
        },
        zero(index) {
            return index < 10 ? "0" + index : index;
        }
    }
};
</script>
<style scoped>
    .flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .box-flex {
        display: flex;
        font-size: 12px;
    }
    .box-left {
        padding: 40px 10px 0 10px;
        width: 30px;
        background-color: black;
        color: #ffffff;
        text-align: center;
        position: absolute;
        z-index: 88;
    }
    .box-set {
        min-width: 600px;
        /* max-width: 600px; */
        max-height: 550px;
        /*margin-right: 30px;*/
        overflow: auto;
        position: relative;
        background-color: black;
    }
    .box-sets {
        /* min-width: 500px;
            max-width: 600px;
            max-height: 800px;
            overflow: auto; */
        position: relative;
        background-color: black;
    }

    .box-top-title {
        position: absolute;
        top: 3px;
    }

    .box-header {
        padding: 10px 0;
        height: 40px;
        margin-left: 40px;
        position: absolute;
        background-color: black;
        z-index: 100;
    }

    .box-headers {
        width: 47px;
        float: left;
        text-align: center;
        display: block;
        color: #ffffff;
        cursor: pointer;
        user-select: none;
    }
    .box-rows {
        position: relative;
        z-index: 99;
        left: 0;
    }
    .box-map-flex {
        border-top: 1px solid #ffffff;
        text-align: center;
        display: flex;
        justify-content: space-between;
    }

    .flexCenter {
        display: flex;
        align-items: center;
    }

    * {
        box-sizing: border-box;
    }

    ul {
        list-style-type: none;
    }

    body {
        font-family: Verdana, sans-serif;
    }

    .info-bg {
        cursor: pointer;
    }

    .row {
        display: flex;
        border-top: 1px solid #ffffff;
        padding: 2px 0 0 0;
    }

    .bay {
        margin-right: 2px;
        width: 45px;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }

    .place {
        /* border: 1px solid rgb(245, 56, 56); */
        width: 45px;
        height: 32px;
        margin-bottom: 2px;
        cursor: pointer;
    }

    .place p {
        word-break: break-all;
        display: flex;
        align-items: center;
        text-align: left;
        font-size: 8px;
        padding: 0;
        line-height:16px;
    }
    .placeChecked {
        border: 2px solid red;
    }
    .placeSelect {
        border: 2px dashed red;
    }
    .even {
        position: relative;
        width: 92px;
        height: 32px;
        justify-content: center;
    }
    .JKZX {
        background-color: #c28efd;
    }
    .CKZX {
        background-color: #f56c6c;
    }
    .BBKX {
        background-color: gold;
    }
    .KX {
        background-color: aquamarine;
    }
    .BXX {
        background-color: #ffffff;
        border: 2px solid red;
    }
    .BBKCW {
        background-color: #5c9dff;
    }
    .DCZLX {
        background-color: greenyellow;
    }
    .card-place {
        display: flex;
        width: 120px;
        margin-right: 20px;
        /*margin-bottom: 10px;*/
        align-items: center;
        justify-content: space-between;
        font-size: 13px;
    }
    .card-place span {
        font-size: 13px;
    }
    .box-card-top {
        display: flex;
        width: 280px;
        flex-wrap: wrap;
    }
    .box-font-style{
        text-align: right;
    }
    .box-font-style span{
        font-size: 13px !important;
    }
</style>
